<div
  class="drawer-pf-notification-inner"
  ng-class="{ 'is-clickable': notification.unread }"
  ng-click="notification.unread && $ctrl.customScope.markRead(notification)">
  <button
    class="btn btn-link pull-right drawer-pf-notification-close"
    type="button"
    ng-if="!notification.actions.length"
    ng-click="$ctrl.customScope.clear(notification, $index, notificationGroup)">
    <span class="sr-only">Clear notification</span>
    <span aria-hidden="true" class="pficon pficon-close"></span>
  </button>
  <div
    uib-dropdown
    class="dropdown pull-right dropdown-kebab-pf"
    ng-if="notification.actions.length">
    <button
      uib-dropdown-toggle
      class="btn btn-link dropdown-toggle"
      type="button"
      id="dropdownKebabRight-{{$id}}"
      data-toggle="dropdown"
      aria-haspopup="true"
      aria-expanded="true">
      <span class="fa fa-ellipsis-v"></span>
    </button>
    <ul
      class="dropdown-menu dropdown-menu-right"
      aria-labelledby="dropdownKebabRight">
      <li
        ng-repeat="action in notification.actions"
        role="{{action.isSeparator === true ? 'separator' : 'menuitem'}}"
        ng-class="{'divider': action.isSeparator === true, 'disabled': action.isDisabled === true}">
        <a
          ng-if="!action.isSeparator"
          href=""
          class="secondary-action"
          title="{{action.title}}"
          ng-click="action.onClick(notification)">
          {{action.name}}
        </a>
      </li>
    </ul>
  </div>

  <span
    class="pull-left {{notification.type | alertIcon}}"
    aria-hidden="true"></span>
  <span class="sr-only">{{notification.event.type}}</span>
  <div class="drawer-pf-notification-content">

    <div
      class="drawer-pf-notification-message word-break"
      ng-attr-title="{{notification.event.message}}">
      <div>

        <span ng-if="notification.event.reason">
          {{notification.event.reason | humanize}}&nbsp;&mdash; <span ng-if="notification.event.involvedObject">{{notification.event.involvedObject.kind | humanizeKind : true}}</span>
        </span>

        <span
          ng-if="notification.event.involvedObject"
          ng-init="eventObjUrl = (notification.event | navigateEventInvolvedObjectURL)">
          <a
            ng-if="eventObjUrl"
            ng-attr-title="Navigate to {{notification.event.involvedObject.name}}"
            href="{{eventObjUrl}}"
            ng-click="$ctrl.customScope.close()">
            {{notification.event.involvedObject.name}}
          </a>
          <span ng-if="!(eventObjUrl)">{{notification.event.involvedObject.name}}</span>
        </span>

        <span ng-if="!(notification.event.involvedObject)">
          <span ng-if="notification.isHTML" ng-bind-html="notification.message"></span>
          <span ng-if="!notification.isHTML">{{notification.message}}</span>
          <span ng-repeat="link in notification.links">
            <a
              ng-if="!link.href"
              href=""
              ng-click="$ctrl.customScope.onLinkClick(link)"
              role="button">{{link.label}}</a>
            <a
              ng-if="link.href"
              ng-href="{{link.href}}"
              ng-click="$ctrl.customScope.close()"
              ng-attr-target="{{link.target}}">{{link.label}}</a>
            <span ng-if="!$last" class="toast-action-divider">|</span>
          </span>
        </span>
        <span class="sr-only">Message Unread. </span>
        <a
          ng-if="notification.unread"
          href=""
          class="sr-only sr-only-focusable"
          ng-click="$ctrl.customScope.markRead(notification)">
          <span>Mark Read</span>
        </a>
      </div>
      <div
        ng-if="notification.event.count > 1"
        class="text-muted small">
        {{notification.event.count}} times in the last
        <duration-until-now
          timestamp="notification.event.firstTimestamp"
          omit-single="true"
          precision="1"></duration-until-now>
      </div>
    </div>

    <div class="drawer-pf-notification-info">
      <span class="date">{{notification.lastTimestamp | date:'shortDate'}}</span>
      <span class="time">{{notification.lastTimestamp | date:'mediumTime'}}</span>
    </div>
  </div>
  <div ng-if="$ctrl.drawerExpanded" class="drawer-pf-notification-message drawer-pf-notification-message-expanded">
    {{notification.event.message || notification.details}}
  </div>
</div>
